<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>药品销售订单</title>
		<link rel="icon" href="../img/favicon.ico" type="images/x-ico" />
		<script src="../fonts/iconfont1.js"></script>
		<script src="../js/xlsx.full.min.js"></script>
		<script src="../js/pagination.js"></script>
		<link rel="stylesheet" href="../css/purmed.css">
		<script type="text/javascript">
			function createtable(datas){
				var tbody =document.querySelector('tbody')
				var rowcount=tbody.rows.length;
						for(var i=0;i<rowcount;i++){
							tbody.deleteRow(i)
							i=i-1;
							rowcount=rowcount-1;
						}
				        for(var i = 0 ; i < datas.length ; i++){
				            //创建行
				            var tr = document.createElement('tr');
				            tbody.appendChild(tr);
				            //创建单元格
							var td = document.createElement('td');
							td.innerHTML = '<input type="checkbox" name="item">';
							tr.appendChild(td);
				            for (var k in datas[i] ){
				                var td = document.createElement("td");
				                td.innerText = datas[i][k];
				                tr.appendChild(td);
				            }
				            //创建删除单元格
				            var td = document.createElement('td');
				            td.innerHTML = '<svg id="alterbtn" onclick="alter(this)" class="icon1" aria-hidden="true" ><use xlink:href="#icon-cangpeitubiao_xiugaixiugaiziliao"></use></svg>';
				            tr.appendChild(td);
				        }
						fenye();
			}
			
			window.onload=function(){
						
					var xhr=new XMLHttpRequest();
					xhr.open('POST','http://127.0.0.1:8000/medpur/findall');
					xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
					xhr.setRequestHeader('Authorization',localStorage.getItem('token'));
					xhr.send();
					xhr.onreadystatechange=function(){
					if(this.readyState==4&&this.status==200){
								
						if(xhr.responseText.indexOf(true)+2){
							var theNeww =JSON.parse(xhr.responseText);
							console.log(theNeww)
							createtable(theNeww)
							}
						}
					}	
		
			}
		</script>
	</head>
	<body>
		<div class="container">
			<div class="topbox">
				<div class="tbleft">
					
					<img id="logo" src="../img/药房 (1).png" alt="">
					<!-- <span style="margin-left: 5px; margin-top: 25px;font-weight: 550;">云药房</span> -->
					<a style="margin-top: 17px; color:#FFFFFF;" href="http://127.0.0.1:8000/home"><span id="title">医药管理系统</span></a>
				</div>
				<div class="tbright">
					<!-- <img style="margin-top: 12px" src="../img/个人中心.png" alt=""> -->
					<!-- <button id="person">个人中心</button>	 -->
					<a href="http://127.0.0.1:8000/login"><img id="out" src="../img/退出.png" alt=""></a>
					
				</div>
			</div>
			<div class="box">
				<div class="nav">
					<ul>
						<li class="item">
							<div class="parentnav">
								<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-yiliao_yao"></use>
								</svg>

								<span>&nbsp药品信息管理</span>
							</div>
							<ul class="sonnav">
								<li id="medmsg">
									<a href="http://127.0.0.1:8000/med" target="_self">药品信息</a>
								</li>
								<li id="medsort">
									<a href="http://127.0.0.1:8000/sort" target="_self">药品种类</a>
								</li>
							</ul>
						</li>
					
						<li class="item">
							<div class="parentnav">
									
								<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-xiaoshou"></use>
								</svg>
							<span>&nbsp;药品进销管理</span>
							
							</div>
							<ul class="sonnav">
								<li id="supmed">
									<a href="http://127.0.0.1:8000/supmed" target="_self">进货订单</a>
								</li >
								<li id="purmed">
									<a href="http://127.0.0.1:8000/purmed" target="_self">销售订单</a>
								</li>

							</ul>
						</li>
						
						<li class="item">
							<div class="parentnav">
								
								<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-guanlirenyuan"></use>
								</svg>
								<span>&nbsp;人员信息管理</span>
							</div>
							<ul class="sonnav">
								<li id="cust">
									<a href="http://127.0.0.1:8000/cust" target="_self">顾客管理</a>
								</li>
								<li id="doc">
									<a href="http://127.0.0.1:8000/doc" target="_self">医生管理</a>
								</li >
								<li id="sup">
									<a href="http://127.0.0.1:8000/sup" target="_self">供应商管理</a>
								</li>
								<li id="oper">
									<a href="http://127.0.0.1:8000/oper" target="_self">操作人员管理</a>
								</li>
							</ul>
						</li>

					</ul>
				</div>
				</div>
				<div class="main">

						<div class="maintop">
								<div class="tabletitle">
									<span>药品销售订单</span>
								</div>
								<div class="search">
									<select name="type" id="selecttype" class="selecttype">
										<option value="med_name">药品名称</option>
										<option value="cust_name">顾客名称</option>
										<option value="doc_name">医生名称</option>
										<option value="state">订单状态</option>
									</select>
									<span>:</span>
									<input type="text" class="inputtext" id="inputtext" placeholder="请输入...">
									<span>起始日期:</span>
									<input type="date" class="dateinput" id="startdate" placeholder="起始日期">
									<span>截止日期:</span>
									<input type="date" class="dateinput" id="enddate" placeholder="结束日期">
								
										<button id="submit" type="submit" onclick="search()">搜索</button>		
								</div>
									
							</div>
							<div class="aabtnbox">

								<svg id="deletebtn" style=" margin-right: 10px;" class= "icon1" aria-hidden="true" onclick="delAll()">
								  <use xlink:href="#icon-shanchu"></use>
								</svg>
						
								<svg id="addbtn" class="icon1" aria-hidden="true">
								  <use xlink:href="#icon-tianjia"></use>
								</svg>
								<svg class="icon" style="margin-left: 10px;" aria-hidden="true" class="icon1" id="sheetjsexport">
									<use xlink:href="#icon-daochu" id=""></use>
								  </svg>
								<button id="cancelfenye" class="handlebtn" onclick="show()">取消分页</button>
							</div>
							<div class="maincontainer" align="center" >
							    <table id="blocks" class="table table-striped" style="margin-top:5px">
									<thead>
										<tr>
											<th class="check"><input type="checkbox" name="item" onclick="checkAll(this)"></th>
											<th class="pur_or_id">订单编号</th>
											<th class="pur_time">交易时间</th>
											<th class="med_id">药品编号</th>
											<th class="med_name">药品名称</th>
											<th class="med_pur_price">药品价格</th>
											<th class="med_pur_num">药品数量</th>
											<th class="med_sum_price">药品总价</th>
											<th class="cust_id">顾客编号</th>
											<th class="cust_name">顾客名称</th>
											<th class="doc_id">医生编号</th>
											<th  class="doc_name">医生名称</th>
											<th class="state">订单状态</th>
											<th  class="comments">备注</th>
											<th class="hand"></th>
										</tr>
									</thead>
							        <tbody id="tbmsg">
										
									</tbody>
							        
							    </table>
							
							    <div id="pagiDiv" align="right" style="width:1200px">
							        <span id="spanFirst">首页</span>&nbsp;&nbsp;
							        <span id="spanPre">上一页</span>&nbsp;&nbsp;
							        <span id="spanNext">下一页</span>&nbsp;&nbsp;
							        <span id="spanLast">尾页</span>&nbsp;&nbsp;
							        第&nbsp;<span id="spanPageNum"></span>&nbsp;页/共&nbsp;<span id="spanTotalPage"></span>&nbsp;页
							    </div>
						</div>
				
					
				<div class="hiddenbox hidden">
							<div class="alterbox hidden">
									<img id="alterreturn" src="../img/取消.png" alt="">
									<div class="alteritem">
										<h2>修改信息</h2>
									
									</div>
									<div class="hiddenitem">
										<span>订单编号:</span>
										
										<input type="text" id="alterpur_or_id" required="required" name="alterpur_or_id" readonly="readonly">
									</div>
									<div class="hiddenitem">
										<span>交易时间:</span>
										
										<input type="text" id="alterpur_time" required="required" name="alterpur_time" readonly="readonly">
									</div>
									<div class="hiddenitem">
										<span>药品编号:</span>
										<input type="text" id="altermed_id" required="required" name="altermed_id">
									</div>
									<div class="hiddenitem">
										<span>药品数量:</span>
										<input type="text" id="altermed_num" required="required" name="altermed_num">
									</div>
									<div class="hiddenitem">
										<span>药品价格:</span>
										<input type="text" id="altermed_price" required="required" name="altermed_price">
									</div>
		
									<div class="hiddenitem">
										<span>顾客编号:</span>
										
										<input type="text" id="altercust_id" required="required" name="altercust_id">
									</div>
									<div class="hiddenitem">
										<span>医生编号:</span>
										
										<input type="text" id="alterdoc_id" required="required" name="alterdoc_id">
									</div>
									<div class="hiddenitem">
										<span>订单状态:</span>
										
										<input type="text" id="alterstate" required="required" name="alterstate">
									</div>
									<div class="hiddenitem">
										<span>&nbsp;&nbsp;&nbsp;&nbsp;备注:</span>
										
										<input type="text" id="altercomments" required="required" name="altercomments">
									</div>
									<div class="hiddenitem">
										<button id="confirmalter" onclick="update()">确认修改</button>
										<button id="cancelalter">取消修改</button>
									</div>
							</div>
							<div class="addbox hidden">
								<img id="addreturn" src="../img/取消.png" alt="">
								<div class="additem">
									
									<h2>添加信息</h2>
								</div>
							
								<div class="hiddenitem">
									<span>交易时间:</span>
									
									<input type="text" id="addpur_time" required="required" name="addpur_time" readonly="readonly" placeholder="系统自动生成">
								</div>
								<div class="hiddenitem">
									<span>药品编号:</span>
									<input type="text" id="addmed_id" required="required" name="addmed_id">
								</div>
								<div class="hiddenitem">
									<span>药品数量:</span>
									<input type="text" id="addmed_num" required="required" name="addmed_num">
								</div>
								<div class="hiddenitem">
									<span>药品价格:</span>
									<input type="text" id="addmed_price" required="required" name="addmed_price">
								</div>
										
								<div class="hiddenitem">
									<span>顾客编号:</span>
									
									<input type="text" id="addcust_id" required="required" name="addcust_id">
								</div>
								<div class="hiddenitem">
									<span>医生编号:</span>
									
									<input type="text" id="adddoc_id" required="required" name="adddoc_id">
								</div>
								<div class="hiddenitem">
									<span>订单状态:</span>
									
									<input type="text" id="addstate" required="required" name="addstate" placeholder="0代表未支付，1代表已支付">
								</div>
								<div class="hiddenitem">
									<span>&nbsp;&nbsp;&nbsp;&nbsp;备注:</span>
									
									<input type="text" id="addcomments" required="required" name="addcomments">
								</div>
								<div class="hiddenitem">
									<button id="confirmadd" onclick="insert()">确认添加</button>
									<button id="canceladd">取消添加</button>
								</div>
							</div>
						</div>
			</div>
			
		</div>

		
	</body>
	<script type="text/javascript">
		let addmsg=document.getElementById('addbtn');
		let altermsg=document.getElementById('alterbtn');
		let addreturn=document.getElementById('addreturn');
		let alterreturn=document.getElementById('alterreturn');
		let canceladd=document.getElementById('canceladd');
		let cancelalter=document.getElementById('cancelalter');
		let hiddenbox=document.getElementsByClassName('hiddenbox')[0];
		let addbox=document.getElementsByClassName('addbox')[0];
		let alterbox=document.getElementsByClassName('alterbox')[0];
		addmsg.addEventListener('click',()=>{
			hiddenbox.classList.remove('hidden');
			addbox.classList.remove('hidden');
			
			
		});
		alter=function(obj){
			hiddenbox.classList.remove('hidden');
			alterbox.classList.remove('hidden');
			var id=document.getElementById('alterpur_or_id')
			var time= document.getElementById('alterpur_time');
			var med_id= document.getElementById('altermed_id');
			var price= document.getElementById('altermed_price');
			var num= document.getElementById('altermed_num');
			var cust_id=document.getElementById('altercust_id');
			var doc_id=document.getElementById('alterdoc_id');
			var state=document.getElementById('alterstate');
			var comments=document.getElementById('altercomments');
			var oTr = obj.parentNode.parentNode;
			var aTd = oTr.getElementsByTagName('td');
			rowIndex = obj.parentNode.parentNode.rowIndex;  
			id.value = aTd[1].innerHTML;
			time.value = aTd[2].innerHTML;
			med_id.value =aTd[3].innerHTML;
			price.value = aTd[5].innerHTML;
			num.value = aTd[6].innerHTML;
			cust_id.value=aTd[8].innerHTML;
			doc_id.value=aTd[10].innerHTML;
			state.value=aTd[12].innerHTML;
			comments.value=aTd[13].innerHTML;
		}
		addreturn.addEventListener('click',()=>{
			addbox.classList.add('hidden');
			hiddenbox.classList.add('hidden');
			
		});
		alterreturn.addEventListener('click',()=>{
			alterbox.classList.add('hidden');
			hiddenbox.classList.add('hidden');
			
		});
		canceladd.addEventListener('click',()=>{
			addbox.classList.add('hidden');
			hiddenbox.classList.add('hidden');
		
		});
		cancelalter.addEventListener('click',()=>{
			alterbox.classList.add('hidden');
			hiddenbox.classList.add('hidden');
		
		});
		
		var numCount;       //数据总数量
		var columnsCounts;  //数据列数量
		var pageCount;      //每页显示的数量
		var pageNum;        //总页数
		var currPageNum ;   //当前页数
		var blockTable=document.getElementById('blocks');
		var preSpan=document.getElementById('spanPre');
		var firstSpan=document.getElementById('spanFirst');
		var nextSpan=document.getElementById('spanNext');
		var lastSpan=document.getElementById('spanLast');
		var pageNumSpan=document.getElementById('spanTotalPage');
		var currPageSpan=document.getElementById('spanPageNum');
		function fenye(){
			numCount = document.getElementById('blocks').rows.length - 1;
			columnsCounts = blockTable.rows[0].cells.length;
			pageCount =16;
			pageNum = parseInt(numCount/pageCount);
					console.log(pageNum)
			if(0 != numCount%pageCount){
				pageNum += 1;
			}
			 firstPage();
		}
		function checkAll(c){
		        var status = c.checked;
		        var oItems = document.getElementsByName('item');
		        for(var i=0;i<oItems.length;i++){
		            oItems[i].checked=status;
		        }
		    }
		    //delAll功能
		function delAll(){
			var olistTable = document.getElementById('tbmsg');
			var items = document.getElementsByName('item');
			for(var j=0;j<items.length;j++){    
				if(items[j].checked)//如果item被选中
				{
					var xhr=new XMLHttpRequest();
					xhr.open('POST','http://127.0.0.1:8000/medpur/delete');
					xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
					xhr.setRequestHeader('Authorization',localStorage.getItem('token'));
					var oParentnode = items[j].parentNode.parentNode;
					var aTd = oParentnode.getElementsByTagName('td');
					olistTable.removeChild(oParentnode);
					j--;
					xhr.send('id='+aTd[1].innerHTML);
					console.log(xhr.responseText);
				}
			}
			
		}
		function insert(){
			var med_id= document.getElementById('addmed_id').value;
			var price= document.getElementById('addmed_price').value;
			var num= document.getElementById('addmed_num').value;
			var cust_id=document.getElementById('addcust_id').value;
			var doc_id=document.getElementById('adddoc_id').value;
			var state=document.getElementById('addstate').value;
			var comments=document.getElementById('addcomments').value;
			var xhr=new XMLHttpRequest();
			xhr.open('POST','http://127.0.0.1:8000/medpur/insert');
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.setRequestHeader('Authorization',localStorage.getItem('token'));
			xhr.send('med_id='+med_id+'&price='+price+'&num='+num+'&cust_id='+cust_id+'&doc_id='+doc_id+'&state='+state+'&comments='+comments);
			xhr.onreadystatechange=function(){
			if(this.readyState==4&&this.status==200){
				if(xhr.responseText.indexOf(true)+2){
					alert(xhr.responseText);
					console.log(xhr.responseText)
					}
				}
			}	
		}
			
		//更新功能
		function update(){
			var id=document.getElementById('alterpur_or_id').value;
			var time= document.getElementById('alterpur_time').value;
			var med_id= document.getElementById('altermed_id').value;
			var price= document.getElementById('altermed_price').value;
			var num= document.getElementById('altermed_num').value;
			var cust_id=document.getElementById('altercust_id').value;
			var doc_id=document.getElementById('alterdoc_id').value;
			var state=document.getElementById('alterstate').value;
			var comments=document.getElementById('altercomments');
			var xhr=new XMLHttpRequest();
			xhr.open('POST','http://127.0.0.1:8000/medpur/update');
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.setRequestHeader('Authorization',localStorage.getItem('token'));
			xhr.send('id='+id+'&med_id='+med_id+'&price='+price+'&num='+num+'&cust_id='+cust_id+'&doc_id='+doc_id+'&state='+state+'&comments='+comments);
			xhr.onreadystatechange=function(){
			if(this.readyState==4&&this.status==200){
				if(xhr.responseText.indexOf(true)+2){
					alert(xhr.responseText);
					console.log(xhr.responseText)
					}
				}
			}
			oMytable.rows[rowIndex].cells[1].innerHTML = id;
			oMytable.rows[rowIndex].cells[2].innerHTML = name;
			oMytable.rows[rowIndex].cells[3].innerHTML = num;
			oMytable.rows[rowIndex].cells[4].innerHTML = price;s
			oMytable.rows[rowIndex].cells[5].innerHTML = pdate;
			oMytable.rows[rowIndex].cells[6].innerHTML = edate;
			oMytable.rows[rowIndex].cells[7].innerHTML = place;
			oMytable.rows[rowIndex].cells[8].innerHTML = sort;
		}
			
		//查找功能
		
		function search(){
			
			var inputtext=document.getElementById('inputtext').value;
			var startdate=document.getElementById('startdate').value;
			var enddate=document.getElementById('enddate').value;
			var selecttype=document.getElementById('selecttype').value;
			console.log(inputtext)
			console.log(startdate)
			console.log(enddate)
			console.log(selecttype)
			var xhr=new XMLHttpRequest();
			xhr.open('POST','http://127.0.0.1:8000/medpur/find');
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.setRequestHeader('Authorization',localStorage.getItem('token'));
			xhr.send('selecttype='+selecttype+'&inputtext='+inputtext+'&start_date='+startdate+'&end_date='+enddate);
			xhr.onreadystatechange=function(){
			if(this.readyState==4&&this.status==200){		
				if(xhr.responseText.indexOf(true)+2){
					var theNeww =JSON.parse(xhr.responseText);
					console.log(theNeww)
					createtable(theNeww)
					}
				}
			}	
		}
		document.getElementById('sheetjsexport').addEventListener('click', function() {  /*根据页面上的表格创建工作表 */
		var wb = XLSX.utils.table_to_book(document.getElementById('blocks'));  /* 导出文件下载 */
		XLSX.writeFile(wb, "药品销售订单.xlsx");
		});
	</script>
</html>